<script setup lang="ts">
import { get, loadFile, message, post } from '@/utils'
import useModal from '@/hooks/useModal'
import { Market, MarketStatus, marketMap } from '@/enum/market'
import useValueEnum from '@/hooks/useValueEnum'
import useTable from '@/hooks/useTable'
const { formatColumns } = useTable()
const searchQuery = reactive({
  publicityType: '',
  publicityId: '',
})
const formRef = ref()
const actionRef = ref()

const pagination = {
  showPageSize: true,
  pageSize: 20,
}
const request = (params: any, sort: any, filters: any): Promise<any> => {
  return new Promise((resolve, reject) => {
    const query = { ...params, size: params.pageSize }
    Reflect.deleteProperty(query, 'pageSize')
    get(
      {
        url: '/server-shop/admin/publicity/goods/page',
        data: query,
      },
      ({ data, code }) => {
        resolve({
          data: data.records,
          total: data.total,
          success: code == 200,
        })
      }
    )
  })
}
const activity = ref()
watch(
  () => activity.value,
  newVal => {
    ;[searchQuery.publicityType, searchQuery.publicityId] = newVal
  }
)
const { valueEnum: seller } = useValueEnum('/server-shop/admin/seller/list')
const columns = formatColumns([
  { title: '商品图片', dataIndex: 'goodsImg', valueType: 'image' },
  { title: '商品名称', dataIndex: 'goodsName' },
  { title: '活动名称', dataIndex: 'publicityTitle' },
  { title: '归属商户', dataIndex: 'sellerId', valueEnum: seller },
  {
    title: '活动类型',
    dataIndex: 'publicityType',
    hideInSearch: false,
    formSlotName: 'select',
    valueEnum: marketMap,
  },
  { title: '排序', dataIndex: 'sort' },
  { title: '销量', dataIndex: 'goodsSalesVolume' },
  { title: '活动销量', dataIndex: 'salesVolume' },
  { title: '创建时间', dataIndex: 'createTime' },
])
const options = [
  { label: 'N元N件', value: Market.N元N件 },
  { label: '限时折扣', value: Market.限时折扣 },
  { label: '限时秒杀', value: Market.限时秒杀 },
  { label: '满减活动', value: Market.满减活动 },
]

const loadMore = (option, done) => {
  console.log('🚀 ~ file: activity.vue:62 ~ loadMore ~ option:', option)
  get(
    {
      url: '/server-shop/admin/publicity/page',
      data: { current: 1, size: 99, type: option.value },
    },
    ({ data }) => {
      const list: any[] = []
      data.records.forEach(_ => {
        list.push({
          label: _.title,
          value: _.id,
          isLeaf: true,
        })
      })
      done(list)
    }
  )
}
</script>

<template>
  <div class="page">
    <ProTable :columns="columns" :request="request" row-key="id" :form-ref="ref => (formRef = ref)" :pagination="pagination" header-title="" column-resizable :params="searchQuery" :bordered="{ cell: true }" :action-ref="ref => (actionRef = ref)" @reset="() => (activity = '')">
      <template #option-render="{ dom, reset }">
        <component :is="dom[1]" />
        <component :is="dom[0]" />
      </template>
      <template #select>
        <a-cascader :options="options" placeholder="请选择活动" :load-more="loadMore" v-model="activity" path-mode />
      </template>
      <template #option="{ record }">
        <a-space>
          <a-button type="text" size="small"> 按钮1 </a-button>

          <a-dropdown>
            <a-button type="text"
              >操作
              <icon-down />
            </a-button>
            <template #content>
              <a-space direction="vertical">
                <a-button type="text" size="small" long> 编辑 </a-button>
                <a-popconfirm content="确认删除该条数据吗?">
                  <a-button type="text" size="small" long> 删除 </a-button>
                </a-popconfirm>
              </a-space>
            </template>
          </a-dropdown>
        </a-space>
      </template>
    </ProTable>
    <!-- <BannerModal
      v-if="store.show"
      v-model:show="store.show"
      :id="store.id"
      @confirm="actionRef.reload"
    /> -->
  </div>
</template>
